<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>限时秒杀</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 702px;
				height: 378px;
				background: url(flash_sale.png);
				margin: 0 auto;
				
			}
			#box div{
				width: 50px;
				height: 50px;
				border: 1px solid gray;
				float: left;
				display: inline-block;
				position: relative;
				top: 260px;
				left: 300px;
				margin-left: 15px;
				text-align: center;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="box">
			<div id="day"></div>
			<div id="hour"></div>
			<div id="minute"></div>
			<div id="seconds"></div>
		</div>
		<script>
			var now=new Date();
			var endSeconds=new Date('2018-06-05 10:50:00')
			var day=hour=minute=seconds=0;
			function seckill(){
				var nowtime=new Date();
				var remain=(endSeconds-nowtime.getTime())/1000;
				if(remain>0){
					var day=parseInt(remain/(24*60*60));
				var hour=parseInt((remain/(60*60))%24);
				var minute=parseInt((remain/60)%60);
				var seconds=parseInt(remain%60);
				}else{
					clearInterval(timer);
					day=hour=minute=seconds=0;
				}
				
				day=(day<10?'0'+day:day);
				hour=(hour<10?'0'+hour:hour);
				minute=(minute<10?'0'+minute:minute);
				seconds=(seconds<10?'0'+seconds:seconds);
				document.getElementById('day').innerHTML=day+'天';
				document.getElementById('hour').innerHTML=hour+'时';
				document.getElementById('minute').innerHTML=minute+'分';
				document.getElementById('seconds').innerHTML=seconds+'秒';
			}
			window.setInterval(seckill,1000);
		</script>
	</body>
</html>
